<template>
  <a-row :gutter="10">
    <a-col :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="7" :sm="8">
                <a-form-item
                  label="线索提交人"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18 }"
                >
                  <a-input
                    placeholder="提交人姓名/手机"
                    allowClear
                    v-model="threadForm.createBy"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="7" :sm="8">
                <a-form-item
                  label="线索跟进人"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18 }"
                >
                  <a-input
                    placeholder="跟进人姓名/手机"
                    allowClear
                    v-model="threadForm.followUpBy"
                  ></a-input>
                </a-form-item>
              </a-col>
              
              <a-col :md="7" :sm="8">
                <a-form-item
                  label="客户"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18 }"
                >
                  <a-input
                    placeholder="客户名称/手机"
                    allowClear
                    v-model="threadForm.customer"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="7" :sm="8">
                <a-form-item
                  label="线索状态"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18 }"
                >
                  <a-select
                    :value="threadForm.status"
                    placeholder="请选择线索状态"
                    @change="onStatusChange"
                  >
                    <a-select-option
                      v-for="item in statusOptions"
                      :key="item.value"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="7" :sm="8">
                <a-form-item
                  label="提交时间"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18 }"
                >
                  <a-range-picker
                    format="YYYY-MM-DD"
                    allowClear
                    show-time
                    v-model="threadForm.time"
                    @change="onPickerChange"
                  >
                  </a-range-picker>
                </a-form-item>
              </a-col>
              <a-col :md="7" :sm="8">
                <a-form-item
                  label="跟进时间"
                  :labelCol="{ span: 5 }"
                  :wrapperCol="{ span: 18 }"
                >
                  <a-range-picker
                    format="YYYY-MM-DD"
                    allowClear
                    show-time
                    v-model="threadForm.followtime"
                    @change="onPickerChange2"
                  >
                  </a-range-picker>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              
              <a-col :md="24" :sm="8">
                <a-form-item
                  :labelCol="{ span: 0 }"
                  style="text-align:right"
                  :wrapperCol="{ span: 24, offset: 5 }"
                >
                  <a-button type="primary" @click="selectInfo()">查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetForm"
                    >清空搜索项</a-button
                  >
                  <a-button
                    type="primary"
                    style="margin-left: 8px"
                    v-has="'thread:export'"
                    @click="Export"
                    >导出</a-button
                  >
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div style="margin-top: 15px">
          <a-table
            style="height: 500px"
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
          >
            <span slot="status" slot-scope="status">
              {{
                status == 1
                  ? "待分配"
                  : status == 2
                  ? "待确认"
                  : status == 3
                  ? "已分配"
                  : status == 4
                  ? "已跟进"
                  : status == 5
                  ? "已成单"
                  : status == 6
                  ? "已流单"
                  : status == 7
                  ? "已撤销"
                  : ""
              }}
            </span>
            <span slot="action" slot-scope="next, record">
              <a @click="showDrawer(record)">详情</a>
            </span>
          </a-table>
        </div>
      </a-card>
    </a-col>
    <!-- 详情 -->
    <a-modal :visible="visible" width="60%" title="线索详情" @cancel="cancelFun" :footer="null">
      <div class="con_wrap">
        <a-form layout="inline">
          <div class="userTag">
            <div class="userTag_title">线索信息</div>
            <a-row>
              <a-col :span="12"> 
                <a-form-item
                  style="width:100%"
                  label="客户名称"
                  :labelCol="{ span: 6 }"
                  :wrapperCol="{ span: 17 }"
                >
                  <a-input
                    disabled="disabled"
                    v-model="jbdLeads.companyName"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  style="width:100%"
                  label="需求描述"
                  :labelCol="{ span: 6 }"
                  :wrapperCol="{ span: 17 }"
                >
                  <a-input
                    disabled="disabled"
                    v-model="jbdLeads.remarks"
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row >
              <a-col :span="12"> 
                <a-form-item
                  style="width:100%"
                  label="联系电话"
                  :labelCol="{ span: 6 }"
                  :wrapperCol="{ span: 17 }"
                >
                  <a-input
                    disabled="disabled"
                    v-model="jbdLeads.contactTel"
                  ></a-input>
                </a-form-item>
              </a-col>
              <!-- <a-col :span="12">
                <a-form-item
                  style="width:100%"
                  label="性别"
                  :labelCol="{ span: 6 }"
                  :wrapperCol="{ span: 17 }"
                >
                  <a-input
                    disabled="disabled"
                    v-model="jbdLeads.code"
                  ></a-input>
                </a-form-item>
              </a-col> -->
            </a-row>
            <!-- <a-row >
              <a-col :span="12"> 
                <a-form-item
                  style="width:100%"
                  label="年龄"
                  :labelCol="{ span: 6 }"
                  :wrapperCol="{ span: 17 }"
                >
                  <a-input
                    disabled="disabled"
                    v-model="jbdLeads.code"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  style="width:100%"
                  label="生日"
                  :labelCol="{ span: 6 }"
                  :wrapperCol="{ span: 17 }"
                >
                  <a-input
                    disabled="disabled"
                    v-model="jbdLeads.code"
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row> -->
          </div>
          <!-- 线索提交人 -->
          <div class="userTag">
            <div class="userTag_title">线索提交人</div>
            <a-row>
              <a-col :span="12"> 
                <a-form-item
                  style="width:100%"
                  label="提交人姓名"
                  :labelCol="{ span: 6 }"
                  :wrapperCol="{ span: 17 }"
                >
                  <a-input
                    disabled="disabled"
                    v-model="jbdLeads.createBy"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  style="width:100%"
                  label="提交时间"
                  :labelCol="{ span: 6 }"
                  :wrapperCol="{ span: 17 }"
                >
                  <a-input
                    disabled="disabled"
                    v-model="jbdLeads.createTime"
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row >
              <a-col :span="12"> 
                <a-form-item
                  style="width:100%"
                  label="提交人手机"
                  :labelCol="{ span: 6 }"
                  :wrapperCol="{ span: 17 }"
                >
                  <a-input
                    disabled="disabled"
                    v-model="jbdLeads.createTel"
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
          <!-- 跟进人 -->
          <div class="userTag">
            <div class="userTag_title">跟进人</div>
            <a-row>
              <a-col :span="12"> 
                <a-form-item
                  style="width:100%"
                  label="跟进人姓名"
                  :labelCol="{ span: 6 }"
                  :wrapperCol="{ span: 17 }"
                >
                  <a-input
                    disabled="disabled"
                    v-model="jbdLeads.ownerUserName"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  style="width:100%"
                  label="首次跟进时间"
                  :labelCol="{ span: 6 }"
                  :wrapperCol="{ span: 17 }"
                >
                  <a-input
                    disabled="disabled"
                    v-model="jbdLeads.followUpTime"
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row >
              <a-col :span="12"> 
                <a-form-item
                  style="width:100%"
                  label="跟进人手机"
                  :labelCol="{ span: 6 }"
                  :wrapperCol="{ span: 17 }"
                >
                  <a-input
                    disabled="disabled"
                    v-model="jbdLeads.ownerTel"
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
          <!-- 跟进记录&&追问记录 -->
          <div class="follow-up">
            <a-row>
              <a-col :span="12"> 
                <div class="userTag" style="margin-right:10px">
                  <div class="userTag_title">跟进记录</div>
                  <div class="listWrap">
                    <time-line :timelineList="recordList"></time-line>
                  </div>
                </div>  
              </a-col>
              <a-col :span="12">
                <div class="userTag">
                  <div class="userTag_title">追问记录</div>
                  <div class="listWrap">
                    <div class="listwrap_item" v-for="(item, index) in problemList" :key="index">
                      <div class="listShow" >
                        <a-row>
                          <a-col :span="4"> 追问:</a-col>    
                          <a-col :span="20"> {{item.problem}}</a-col> 
                        </a-row>
                        <a-row >
                          <a-col :span="4"> 追问时间:</a-col>    
                          <a-col :span="20"> {{item.createTime}}</a-col> 
                        </a-row>
                      </div>
                      <div class="listShow2" v-if="item.reply">
                        <a-row>
                          <a-col :span="4"> 回复:</a-col>    
                          <a-col :span="20"> {{item.reply}}</a-col> 
                        </a-row>
                        <a-row >
                          <a-col :span="4"> 回复时间:</a-col>    
                          <a-col :span="20"> {{item.replyTime}} </a-col> 
                        </a-row>
                      </div>
                    </div>
                    
                  </div>
                </div> 
              </a-col>
            </a-row>
          </div>
        </a-form>
      </div>
    </a-modal>

  </a-row>
</template>
<script>
import {
  queryById,
  jbdLeadList,
} from "@/api/threadManage";
import Timeline from "@/components/Timeline/timelinelist";

export default {
  name: "RoleUserList",
  components: {
      "time-line": Timeline
    },
  data() {
    return {
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      loading: false,
      selectedRowKeys: [],
      rightcolval: 0,
      columns: [
        {
          title: "客户名称",
          align: "center",
          dataIndex: "companyName",
        },
        {
          title: "客户手机号",
          align: "center",
          dataIndex: "contactTel",
        },
        {
          title: "线索提交人",
          align: "center",
          dataIndex: "createBy",
        },
        {
          title: "提交时间",
          align: "center",
          dataIndex: "createTime",
        },
        {
          title: "跟进人",
          dataIndex: "followUpName",
          align: "center",
        },
        {
          title: "跟进时间",
          dataIndex: "followUpTime",
          align: "center",
        },
        {
          title: "线索状态",
          align: "center",
          dataIndex: "status",
          scopedSlots: { customRender: "status" },
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      typeValue: [],
      statusOptions: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "待分配",
        },
        {
          value: "2",
          label: "待确认",
        },
        {
          value: "3",
          label: "已分配",
        },
        {
          value: "4",
          label: "已跟进",
        },
        {
          value: "5",
          label: "已成单",
        },
        {
          value: "6",
          label: "已流单",
        },
      ], // 线索状态数据
      statusValue: [],
      threadForm: {
        followUpBy: "", //	跟进人
        customer: "", //客户
        code: "", // 线索编号
        time: [], // 提交时间
        followtime: [], // 跟进时间
        createBy: "", // 提交人
        status: "", // 线索状态
      },
      // 详情
      pstyle1: {
        fontSize: "20px",
        color: "black",
        borderBottom: "1px solid #eeeeee",
        paddingBottom: "10px",
      },
      pstyle2: {
        fontSize: "17px",
        borderBottom: "1px solid #eeeeee",
        width: "100%",
        left: 0,
        lineHeight: "30px",
        padding: "20px",
      },
      visible: false,
      contacts: "", // 联系人
      contactTel: "", // 联系电话
      allocationStatus: "",
      allocationId: "",
      ownerUserId: "", //所属用户id
      threadId: "",

      // 详情
      jbdLeads: {},
      problemList: [],
      recordList: []
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 导出
    Export() {
      const token = JSON.parse(window.localStorage.getItem('pro__Access-Token')).value;
      const selections = this.selectedRowKeys.toString()
      window.open(
        `https://jbd.iminggu.com/jeecg-boot/jbd/jbdLeads/exportXls?selections=${selections}&token=${token}`
      );
    },

    // 选择
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },

    // 获取列表数据
    async getList() {
      let data = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        leadsCode: this.threadForm.code, // 线索编号
        startTime: this.threadForm.time[0], // 提交开始时间
        endTime: this.threadForm.time[1], // 提交结束时间
        followUpStartTime: this.threadForm.followtime[0], // 跟进开始时间
        followUpEndTime: this.threadForm.followtime[1], // 跟进结束时间
        createBy: this.threadForm.createBy, // 提交人
        status: this.threadForm.status, // 线索状态
        followUpBy: this.threadForm.followUpBy, // 跟进人
        customer: this.threadForm.customer, //客户
      };
      const res = await jbdLeadList(data);
      this.dataSource = res.result.records;
      this.ipagination.total = res.result.total;
    },

    // 获取详情
    async getDetails(id) {
      const res = await queryById({ id });
      this.jbdLeads = res.result.jbdLeadsVo;
      this.problemList = res.result.problemList;
      this.recordList = res.result.recordList;
    },

    // 查询
    selectInfo() {
      this.ipagination.current = 1
      this.getList();
    },
    // 提交时间
    onPickerChange(data, dateString) {
      this.threadForm.time = dateString;
    },
    onPickerChange2(data, dateString) {
      this.threadForm.followtime = dateString
    },
    resetForm() {
      // 表单重置
      this.threadForm.followUpBy = "";
      this.threadForm.time = [];
      this.threadForm.followtime = [];
      this.threadForm.createBy = "";
      this.threadForm.customer = ""
      this.threadForm.status = ""
      this.typeValue = [];
      this.statusValue = [];
      this.getList();
    },
    // 详情弹框
    showDrawer(value) {
      this.visible = true;
      this.getDetails(value.id);
    },

    // 关闭弹出
    cancelFun(){
      this.visible = false;
    },

    // 状态选择
    onStatusChange(value) {
      this.threadForm.status = value;
      this.statusValue = this.statusOptions[value - 1].label;
    },
    handleTableChange(e) {
      this.ipagination.current = e.current;
      this.ipagination.pageSize = e.pageSize;
      this.getList();
    },

  },
};
</script>
<style lang="less" scoped>
/** Button按钮间距 */
.ant-btn {
  margin-left: 8px;
}
.allotDialog-top {
  font-size: 16px;
  border-bottom: 1px solid #eee;
  .allotDialog-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .info-left {
      width: 100%;
      height: 60px;
      background: #fafafa;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .info-tag {
        background: rgba(255, 171, 45, 0.12);
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #ffab2d;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 11px;
        margin-right: 38px;
      }
      .name {
        .tag {
          margin-left: 10px;
          font-size: 14px;
          color: rgb(255, 115, 0);
        }
      }
      .phone {
        span:nth-child(1) {
          margin: 0 20px;
        }
      }
    }
  }
  .allotDialog-remark {
    padding: 22px 26px;
    font-size: 14px;
    font-weight: 400;
    color: #656565;
    border-top: 1px solid #e8e8e8;
  }
}
.select-content {
  padding: 22px 25px;
  .select-title {
    display: flex;
    justify-content: space-between;
    div {
      flex: 1;
    }
  }
  .select-btn {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    div {
      flex: 1;
    }
  }
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 474px;
  height: 60px;
  background: #fafafa;
  .info-tag {
    background: rgba(255, 171, 45, 0.12);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #ffab2d;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    margin-left: 18px;
  }
  .allocation_right {
    margin-right: 23px;
  }
  .phone {
    display: flex;
    align-items: center;
    span:nth-child(1) {
      margin: 0 20px;
    }
  }
}
.col-title {
  display: inline-block;
  width: 120px;
  color: #000000;
  margin-right: 20px;
}
.col-text {
  font-size: 17px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #bbbbbb;
}
/deep/.ant-modal-body {
  padding: 0;
}
.con_wrap{
  padding: 0px 20px 20px;
  height: 65vh;
  overflow: auto;
  .userTag {
    padding-bottom: 20px;
  .userTag_title {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 550;
  }
  .listWrap{
    overflow: hidden;
    .listwrap_item{
      border-radius: 5px;
      margin-bottom: 10px;
      overflow: hidden;
      .listShow{
        padding:10px 10px 5px;
        background-color: #f5f5f5;
        .ant-row{
          margin-bottom: 5px;
        }
      }
      .listShow2{
        padding: 5px 10px 10px;
        border-top: 1px solid #dedede;
        background-color: #f5f5f5;
        .ant-row{
          margin-bottom: 5px;
        }
      }
    }
  }

  }
}
// .userTag {
//   padding: 24px;
//   .userTag_title {
//     margin-bottom: 23px;
//   }
// }
/deep/.ant-drawer-body {
  padding: 0;
}
/deep/ .ant-calendar-picker{
  width: auto !important;
}
.allotDialog-remarks {
  padding: 22px 26px;
  font-size: 18px;
  font-weight: 400;
  color: #656565;
  border-top: 1px solid #e8e8e8;
}
.flex {
  display: flex;
}
.flex-a-c {
  align-items: center;
}

.flex-j-s-b {
  justify-content: space-between;
}

.ant-form {
  padding: 20px 0 0 0;
}
.timeTitle {
  margin: 20px 0;
}
</style>
